<template>
    <div>
      <div style="margin-bottom: 15px;">
        <Form ref="filterItem" :model="filterItem" inline :show-message="false" class="form-not-msg">
          <Card style="width: 100%" dis-hover>
            <Row :gutter="10">
              <Col span="20">
              <div>
                <Form-item label="发布状态" :label-width="80" >
                  <Select v-model="filterItem.status" style="width: 120px" placeholder="请选择状态">
                    <Option :value="0">未发布</Option>
                    <Option :value="1">已发布</Option>
                  </Select>
                </Form-item>
                <Form-item>
                  <Input v-model="filterItem.keyword" style="width: 170px" placeholder="请输入作业名称" />
                </Form-item>
                <Form-item>
                  <Button type="primary" :loading="searchLoading" @click="handleSearch" icon="search"> 查询</Button>
                  <Button type="dashed" @click="handleReset">重置</Button>
                </Form-item>
              </div>
              </Col>
              <Col span="4">
                <div class="pull-right">
                  <Button type="text" icon="plus">新增作业</Button>
                </div>
              </Col>
            </Row>
          </Card>
        </Form>
      </div>

      <Table :columns="columns1" :data="data1"></Table>
      <div class="page-component">
        <Page :total="100"></Page>
      </div>
    </div>
</template>
<script>
export default{
  data() {
    return {
      filterItem: {
        status: '',
        keyword: ''
      },
      searchLoading: false,
      columns1: [
        {
          title: '名称',
          key: 'name',
          width: 250
        },
        {
          title: '状态',
          key: 'status',
          align: 'center',
          render: (h, params) => {
            const color = ['red', 'green']
            const text = ['未发布', '已发布']
            return h('Tag', {
              props: {
                type: 'dot',
                color: color[params.row.status]
              }
            }, text[params.row.status])

          }
        },
        {
          title: '发布日期',
          align: 'center',
          key: 'created'
        },
        {
          title: '截止日期',
          align: 'center',
          key: 'endAd'
        },
        {
          title: '操作',
          key: 'action',
          align: 'center',
          width: 240,
          render: (h, params) => {
            let renderDOM = [
              h('Button', {
                props: {
                  type: 'text',
                  size: 'small'
                },
                on: {
                  click: () => {

                  }
                }
              }, '编辑'),
              h('Poptip', {
                props: {
                  confirm: true,
                  title: '删除后无法恢复哦！',
                  placement: 'bottom-end'
                },
                on: {
                  'on-ok': () => {
                    console.log(params)
                  }
                }
              }, [
                h('Button', {
                  props: {type: 'text'}
                }, '删除')
              ])
            ]

            if(params.row.status === 0) {
              renderDOM.push(h('Button', {
                props: {
                  type: 'text',
                  size: 'small'
                },
                on: {
                  click: () => {

                  }
                }
              }, '发布'))
            } else {
              renderDOM.push(h('Button', {
                props: {
                  type: 'text',
                  size: 'small'
                },
                on: {
                  click: () => {

                  }
                }
              }, '批阅'), h('Button', {
                props: {
                  type: 'text',
                  size: 'small'
                },
                on: {
                  click: () => {

                  }
                }
              }, '取消发布'))
            }

            return h('div', renderDOM)
          }
        }
      ],
      data1: [
        {
          name: '植物的生长过程？',
          status: 0,
          created: '2016-10-03 08:00',
          endAd: '2016-10-03 09:00'
        },
        {
          name: '电子技术的学习方法？',
          status: 1,
          created: '2016-10-03 08:00',
          endAd: '2016-10-03 09:00'
        }
      ]
    }
  },
  methods: {
    handleSearch() {

    },
    handleReset() {
      this.$refs['filterItem'].resetFields();
    }
  }
}
</script>
